{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
	<title>index</title>
	<meta charset="utf-8"></meta>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="../static/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
	<link href="../static/css/video-js.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" type="text/css" href="../static/css/build.css">
	<script src="../static/js/jquery-3.3.1.min.js" type="text/javascript"></script>
	<script src="../static/js/bootstrap.min.js" type="text/javascript"></script>
	<script src="../static/js/myScript.js" type="text/javascript"></script>
	<script src="../static/js/video.js" type="text/javascript"></script>
	<link rel="stylesheet" href="../static/assets/hivideo.css" />
    <script type="text/javascript" src="../static/js/hivideo.js"></script>
    <script type="text/javascript">

    </script>
	<style type="text/css">
		/*body{}*/
		body {
			/*margin:0;padding:0;font-size:12px;*/
			/* 加载背景图 */
			background-image: url(../static/images/beijing4.jpg);

			/* 背景图垂直、水平均居中 */
			background-position: center center;

			/* 背景图不平铺 */
			background-repeat: no-repeat;

			/* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
			background-attachment: fixed;

			/* 让背景图基于容器大小伸缩 */
			background-size: cover;
		}
		ul.lanren{width:300px;margin:60px auto;}
		.scale_panel{color:#999;width:200px;position:absolute;line-height:18px;left:135px;top:3px;}
		.scale_panel .r{float:right;}
		.scale span{background:url(../static/images/scroll.gif) no-repeat;width:8px;height:16px;position:absolute;left:-2px;top:-5px;cursor:pointer;}
		.scale{ background-repeat: repeat-x; background-position: 0 100%; background-color: #E4E4E4; border-left: 1px #83BBD9 solid;  width: 200px; height: 3px; position: relative; font-size: 0px; border-radius: 3px; }
		.scale div{ background-repeat: repeat-x; background-color: #3BE3FF; width: 0px; position: absolute; height: 3px; width: 0; left: 0; bottom: 0; }
		.lanren li{font-size:12px;line-height:50px;position:relative;height:50px;list-style:none;}

		.vid-wrap{
		    width:100%;background: #000;
		    position:relative;
		    padding-bottom:50.25%;    /*需要用padding来维持16:9比例,也就是9除以16*/
		    height: 0;
		}

		.vid-wrap video{
		    position: absolute;
		    top:0;
		    left: 0;
		    width: 100%;
		    height: 100%
		}
		#progressWrap{
            background-color: black;
            height: 25px;
            cursor: pointer;
        }
        #playProgress{
            background-color: red;
            width: 0px;
            height: 25px;
            border-right: 2px solid blue;
        }
        #showProgress{
            background-color: ;
            font-weight: 600;
            font-size: 20px;
            line-height: 25px;
        }
	</style>
</head>
<body>
	<div id="Headrow" class="row">
		<h1 align="center" id="HeadH1">
		<!-- <p id="HeadTxt">Test</p> -->
	</div>
	<div class="row">
		<div class="col-md-12 col-md-3"></div>
		<div class="col-md-12 col-md-2">
			<!-- <div class="main-wrap" width="350" height="250" >
		        <video ishivideo="false" autoplay="false" isrotate="false" autoHide="false">
		            <source src="static/video/video.mp4" type="video/mp4">
		        </video>
		    </div> -->
		    <video id="video1" width="350" height="500" ishivideo="false" autoplay="false" isrotate="false" autoHide="false" style="margin-left: -60px;">
	            <source id="vpath1" src="" type='video/mp4'>
	        </video>
		</div>
		<div class="col-md-12 col-md-1"></div>
		<div class="col-md-12 col-md-2">
<!-- 			<div class="main-wrap">
		        <video ishivideo="true" autoplay="true" isrotate="false" autoHide="true">
		            <source src="static/video/video4_3_848x480.mp4" type="video/mp4">
		        </video>
		    </div>	 -->

			<div class="videoPlayer" id="videoContainer">
			    <video id="video2" width="350" height="500" ishivideo="false" autoplay="false" isrotate="false" autoHide="false">
		            <source id="vpath2" src="" type='video/mp4'>
		            <!-- <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.ogg" type='video/ogg'> -->
		        </video>
			</div>
		</div>
	    <div class="col-md-12 col-md-2"></div>
    </div><br>
    <div class="row">
    	<div class="videoPlayer" id="videoContainer" style="margin:0 auto;margin-left: 30%;margin-right: 30%;">
	        <video id="video" preload controls style="display:none">
	            <!-- <source src="../static/video/video.mp4" type='video/mp4'> -->
	            <!-- <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.ogg" type='video/ogg'> -->
	        </video>
	        <div id="videoControls" style="">
	            <div id="progressWrap">
	                <div id="playProgress">
	                    <span id="showProgress">0</span>
	                </div>
	            </div>
	        </div>
	    </div>
	    
    </div><br>
    <div class="row">
		<div class="col-md-12">
	    	<div class="col-md-12 col-md-5"></div>
		    <div class="col-md-12 col-md-3" style="left:18px">
			    <div class="btn-group" role="group" aria-label="...">
						<button id="playBtn" type="button" class="btn btn-lg btn-success">Play</button>
		    			<button id="pauseBtn" type="button" class="btn btn-lg btn-danger" style="display:none">Stop</button>
		    			<button id="Restart" type="button" class="btn btn-lg btn-info">Restart</button>
				</div>
			</div>
			<div class="col-md-12 col-md-2"></div>
			<div class="col-md-12 col-md-2">
					<div class="btn-group" id="setting">
			            <select id="selected" type="button" class="btn btn-default dropdown-toggle">
			            	<!-- <button type="button" class="btn btn-default btn-lg">
							  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
							</button> -->
			            	<!-- <span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span> 设置 -->	
							<!-- <option value ="0"><p><span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>设置22</p></option> -->
							<option value ="1">循环播放，自动跳到下个视频</option>
							<option value ="2">循环播放当前视频，不跳到下个视频</option>
							<option value="3">暂停后，自动跳转到下个视频</option>
							<option value="4">暂停后，不跳到下个视频</option>
						</select>
					</div>
				</div>
			</div>
	</div>
	<div id="score">
    	<!-- <form role="form" action="/forms/" method="post"> -->
    	<form target="rfFrame">
    		<!-- {% csrf_token %} -->
    		<iframe id="rfFrame" name="rfFrame" src="about:blank" style="display:none;"></iframe> 
	        <div >
	        	<div class="col-md-12 col-md-1"></div>
	            <div class="col-md-12 col-md-3">
	                <fieldset>
	                    <legend>
	                        Video_One
	                    </legend>
	                    <p>评分：</p>
	                    <div class="radio radio-inline radio-warning">
	                        <input type="radio" name="Video_One" id="inlineRadio1" value="1" name="radioInline">
	                        <label for="inlineRadio1"> 1分 </label>
	                    </div>
	                    <div class="radio radio-inline radio-success">
	                        <input type="radio" name="Video_One" id="inlineRadio2" value="2" name="radioInline">
	                        <label for="inlineRadio2"> 2分 </label>
	                    </div>
	                    <div class="radio radio-inline radio-info">
	                        <input type="radio" name="Video_One" id="inlineRadio3" value="3" name="radioInline">
	                        <label for="inlineRadio3"> 3分 </label>
	                    </div>
	                    <div class="radio radio-inline radio-danger">
	                        <input type="radio" name="Video_One" id="inlineRadio4" value="4" name="radioInline">
	                        <label for="inlineRadio4"> 4分 </label>
	                    </div>
	                    <div class="radio radio-inline">
	                        <input type="radio" name="Video_One" id="inlineRadio5" value="5" name="radioInline" checked>
	                        <label for="inlineRadio5"> 5分 </label>
	                    </div>
	                    <ul class="lanren">
							<li>Video_One评分： <span id="title">0</span>
								<div class="scale_panel">
									<span class="r">100</span>0
									<div class="scale" id="bar">
										<div></div>
										<span id="btn"></span>
									</div>
								</div>
							</li>
						</ul>
	                </fieldset>
	            </div>
	            <div class="col-md-12 col-md-3"></div>
	            <div class="col-md-12 col-md-3">
	                <fieldset>
	                    <legend>
	                        Video_Two
	                    </legend>
	                    <p>评分：</p>
	                    <div class="radio radio-inline radio-warning">
	                        <input type="radio" name="Video_Two" id="radioSingle1" value="1" name="radioSingle">
	                        <label for="radioSingle1"> 1分 </label>
	                    </div>
	                    <div class="radio radio-inline radio-success">
	                        <input type="radio" name="Video_Two" id="radioSingle2" value="2" name="radioSingle">
	                        <label for="radioSingle2"> 2分 </label>
	                    </div>
	                    <div class="radio radio-inline radio-info">
	                        <input type="radio" name="Video_Two" id="radioSingle3" value="3" name="radioSingle">
	                        <label for="radioSingle3"> 3分 </label>
	                    </div>
	                    <div class="radio radio-inline radio-danger">
	                        <input type="radio" name="Video_Two" id="radioSingle4" value="4" name="radioSingle">
	                        <label for="radioSingle4"> 4分 </label>
	                    </div>
	                    <div class="radio radio-inline">
	                        <input type="radio" name="Video_Two" id="radioSingle5" value="5" name="radioSingle" checked>
	                        <label for="radioSingle5"> 5分 </label>
	                    </div>
	                    <div class="row">
		                    <ul class="lanren">
								<li>Video_Two评分： <span id="titletwo">0</span>
									<div class="scale_panel">
										<span class="r">100</span>0
										<div class="scale" id="bartwo">
											<div></div>
											<span id="btntwo"></span>
										</div>
									</div>
								</li>
							</ul>
						</div>
	                </fieldset>
	            </div>
	        </div>
	        <div style="width:100px; margin:10px auto;" align="center">
		    	<button id="submit" class="btn btn-lg btn-warning" type="submit" onclick="SubmitLottery()">Submit</button>
		    	<!-- <button id="submit" class="btn btn-lg btn-warning" data-toggle="modal" data-target="#myModal" onclick="SubmitLottery()">Submit</button> -->
		    </div>
	    </form>
	    <!-- <p>{{ rlt }}</p> -->
    </div>

	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h3 class="modal-title" id="myModalLabel">
						感谢参与！
					</h3>
				</div>
				<div class="modal-body">
					优化前视频得分：
					优化后视频得分：
				</div>
				<div class="modal-body">
					按下 ESC 按钮退出。
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-default" 
							data-dismiss="modal">关闭
					</button>
				</div>
			</div><!-- /.modal-content -->
		</div><!-- /.modal-dialog -->
	</div><!-- /.modal -->

<script>
	//弹出自定义提示窗口
		// window.alert = function (name) {
		// 	const iframe = document.createElement('IFRAME');
		// 	iframe.style.display = 'none';
		// 	iframe.setAttribute('src', 'data:text/plain,');
		// 	document.documentElement.appendChild(iframe);
		// 	window.frames[0].window.alert(name);
		// 	iframe.parentNode.removeChild(iframe);
		// };

		// var showAlert= function(msg, url){
		//     //弹框存在
		//     if ( $("#alert_box").length > 0) {
		//         $('#pop_box_msg').html(msg);
		//     } else {
		//         var alertHtml = '<div id="alert_box">'
		//                     +       '<div class="cover"  id="cover_alert"  onclick="closeAlert()"></div>'
		//                     +       '<div class="pop_box" id="pop_box_alert" onclick="closeAlert()">'
		//                     +           '<div class="pop_img">'
		//                     +               '<img src="/assets/images/img/pop_top.png">'
		//                     +           '</div>'
		//                     +           '<div class="pop_center">'
		//                     +               '<span id="pop_box_msg">' + msg + '</span>'
		//                     +           '</div>'
		//                     +           '<div class="pop_img">'
		//                     +               '<img src="/assets/images/img/pop_bottom.png">'
		//                     +           '</div>'
		//                     +       '</div>'
		//                     +   '</div>';
		//         $("body").append(alertHtml);
		//     }
		//     $("#alert_box").show();
		//     if(url){
		//          setTimeout(function(){
		//             window.location.href = url + '?id=' + 10000*Math.random();
		//          } , 2000 );
		//     }else{
		//          setTimeout("$('#alert_box').hide();" , 2000);
		//     }
		// }

		//重定义alert
		// window.alert=showAlert;


    (function(window, document){
        // 获取要操作的元素
        // var video = document.getElementById("video");
        var video1 = document.getElementById("video1");
        var video2 = document.getElementById("video2");
        var videoControls = document.getElementById("videoControls");
        var videoContainer = document.getElementById("videoContainer");
        var controls = document.getElementById("video_controls");
        var playBtn = document.getElementById("playBtn");
        var fullScreenBtn = document.getElementById("fullScreenBtn");
        var progressWrap = document.getElementById("progressWrap");
        var playProgress = document.getElementById("playProgress");
        var fullScreenFlag = false;
        var progressFlag;

        // 设置开始视频默认开始时间
	    // video1.currentTime="2";
	    // video2.currentTime="2";

        // 创建我们的操作对象，我们的所有操作都在这个对象上。
        var videoPlayer = {
            init: function(){
                var that = this;
                video.removeAttribute("controls");
                // bindEvent(video, "loadeddata", videoPlayer.initControls);
                bindEvent(video1, "loadeddata", videoPlayer.initControls);
                bindEvent(video2, "loadeddata", videoPlayer.initControls);
                videoPlayer.operateControls();
            },
            initControls: function(){
                videoPlayer.showHideControls();
            },
            showHideControls: function(){
                bindEvent(video, "mouseover", showControls);
                bindEvent(videoControls, "mouseover", showControls);
                bindEvent(video, "mouseout", hideControls);
                bindEvent(videoControls, "mouseout", hideControls);
            },
            operateControls: function(){
                bindEvent(playBtn, "click", play);
                bindEvent(video, "click", play);
                bindEvent(pauseBtn, "click", pause);
                bindEvent(progressWrap, "mousedown", videoSeek);
            }
        }

        videoPlayer.init();

        // 原生的JavaScript事件绑定函数
        function bindEvent(ele, eventName, func){
            if(window.addEventListener){
                ele.addEventListener(eventName, func);
            }
            else{
                ele.attachEvent('on' + eventName, func);
            }
        }
        // 显示video的控制面板
        function showControls(){
            videoControls.style.opacity = 1;
        }
        // 隐藏video的控制面板
        function hideControls(){
            // 为了让控制面板一直出现，我把videoControls.style.opacity的值改为1
            videoControls.style.opacity = 1;
            // console.log("@")
        }
        // 控制video的播放
        function play(){
            if ( video.paused || video.ended ){
                if ( video.ended ){
                    video.currentTime = 0;
                }
                // video.play();
                video1.play();
                video2.play();
                // playBtn.innerHTML = "暂停";
                $("#playBtn").css("display","none");
	    		$("#pauseBtn").css("display","block");
                progressFlag = setInterval(getProgress, 60);
            }else{
                // playBtn.innerHTML = "播放";
                console.log("播放");
            }
        }
        // 控制video是否全屏，额这一部分没有实现好，以后有空我会接着研究一下
        function fullScreen(){
            if(fullScreenFlag){
                videoContainer.webkitCancelFullScreen();
            }
            else{
                videoContainer.webkitRequestFullscreen();
            }
        }
        //重写暂停
        function pause(){
            if(pause){
            	$("#playBtn").css("display","block");
	    		$("#pauseBtn").css("display","none");
                video1.pause();
                video2.pause();
                var gsv = getSettingVal();
                if (vlc!=null && gsv==3 && xhs==1){
                	$("#video1").attr("src",'../static/video/'+vlc);
        			$("#video2").attr("src",'../static/video/'+getVideoAfterPath(vlc));
        			$("#playBtn").css("display","block");
	    			$("#pauseBtn").css("display","none");
	    			xhs = 0;
        // 			$("#playBtn").css("display","block");
	    			// $("#pauseBtn").css("display","none");
	    			// video1.pause();
        //         	video2.pause();
                } 
            }
        }
        // video的播放条
        function getProgress(){
            var percent = video1.currentTime / video1.duration;
            playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";
            showProgress.innerHTML = (percent * 100).toFixed(1) + "%";
        }
        // 鼠标在播放条上点击时进行捕获并进行处理
        function videoSeek(e){
            if(video1.paused || video1.ended){
                play();
                enhanceVideoSeek(e);
            }
            else{
                enhanceVideoSeek(e);
            }

        }
        function enhanceVideoSeek(e){
            clearInterval(progressFlag);
            var length = e.pageX - progressWrap.offsetLeft;
            var percent = length / progressWrap.offsetWidth;
            playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";
            video1.currentTime = percent * video1.duration;
            video2.currentTime = percent * video2.duration;
            progressFlag = setInterval(getProgress, 60);
        }

    }(this, document))


	//隐藏项
	// $("#score").hide();
	// $("#setting").hide();
    //end

    //video
    var video1 = $('#video1');
    var video2 = $('#video2');
    var vList = ['video1.mp4','video2.mp4','video3.mp4','video4.mp4','video5.mp4']; // 初始化播放列表
    var curr = 0,i =0,video_id=1,fraction_vo=0,fraction_vt=0,videoStatus=0,vlc='',xhs=0,notes,setting_val=0;

    $("#video1").attr("src",'../static/video/'+vList[0]);
	$("#video2").attr("src",'../static/video/'+getVideoAfterPath(vList[0]));
	var video_one = document.querySelector("#video1");//document.getElementById("video1");
    var video_two = document.querySelector('#video2');
    video_one.load();
    video_one.pause();
 	video_two.load();
    video_two.pause();
	$("#selected").change(function(){
	    var opt=$("#selected").val();
	    console.log(opt);
	    setting_val = opt
	});
    function nextVideo() {
        // $('#testSelect option:selected').val();//选中的值
        // var 
        // setting_val = getSettingVal();
        var rn = randomNum(1,100);  //每次循环之后，获取随机数
        if (setting_val==1){   //alert(src.substring(7,10));
        	video_id = getVideoID(vList[curr]);
        	if(rn%2==0){
        		$("#video1").attr("src",'../static/video/'+vList[curr]);
        		$("#video2").attr("src",'../static/video/'+getVideoAfterPath(vList[curr]));
        		notes = 0;
        	}else{
        		$("#video1").attr("src",'../static/video/'+getVideoAfterPath(vList[curr]));
        		$("#video2").attr("src",'../static/video/'+vList[curr]);
        		notes = 1;
        	}
        }else if (setting_val==2){
        	curr = getcurrVal(curr);
        	video_id = getVideoID(vList[curr]);
        	if(rn%2==0){
        		$("#video1").attr("src",'../static/video/'+vList[curr]);
        		$("#video2").attr("src",'../static/video/'+getVideoAfterPath(vList[curr]));
        		notes = 0;
        	}else{
        		$("#video1").attr("src",'../static/video/'+getVideoAfterPath(vList[curr]));
        		$("#video2").attr("src",'../static/video/'+vList[curr]);
        		notes = 1;
        	}
        }else if (setting_val==3){
    		video_id = getVideoID(vList[curr]);
    		vlc = vList[Number(curr)+1];
    		// xhs = 1;
        	if(rn%2==0){
        		$("#video1").attr("src",'../static/video/'+vList[curr]);
        		$("#video2").attr("src",'../static/video/'+getVideoAfterPath(vList[curr]));
        		notes = 0;
        	}else{
        		$("#video1").attr("src",'../static/video/'+getVideoAfterPath(vList[curr]));
        		$("#video2").attr("src",'../static/video/'+vList[curr]);
        		notes = 1;
        	}
        }else if (setting_val==4){
        	curr = getcurrVal(curr);
        	video_id = getVideoID(vList[curr]);
        	if(rn%2==0){
        		$("#video1").attr("src",'../static/video/'+vList[curr]);
        		$("#video2").attr("src",'../static/video/'+getVideoAfterPath(vList[curr]));
        		notes = 0;
        	}else{
        		$("#video1").attr("src",'../static/video/'+getVideoAfterPath(vList[curr]));
        		$("#video2").attr("src",'../static/video/'+vList[curr]);
        		notes = 1;
        	}
        }else{
        	video_id = getVideoID(vList[Number(curr)+1]);
        	if(rn%2==0){
        		$("#video1").attr("src",'../static/video/'+vList[Number(curr)+1]);
        		$("#video2").attr("src",'../static/video/'+getVideoAfterPath(vList[Number(curr)+1]));
        		notes = 0;
        	}else{
        		$("#video1").attr("src",'../static/video/'+getVideoAfterPath(vList[Number(curr)+1]));
        		$("#video2").attr("src",'../static/video/'+vList[Number(curr)+1]);
        		notes = 1;
        	}
        }

        curr++;
        if(curr >= vList.length){
            curr = 0; //重新循环播放
        }
    }

    video1.on('ended', function(){
        nextVideo();
    });
    //生成从minNum到maxNum的随机数
	function randomNum(minNum,maxNum){ 
	    switch(arguments.length){ 
	        case 1: 
	            return parseInt(Math.random()*minNum+1,10); 
	        break; 
	        case 2: 
	            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
	        break; 
	            default: 
	                return 0; 
	            break; 
	    } 
	} 

    function getSettingVal(){
    	var value = document.getElementById("selected").value;
        return value
    }
    function getVideoAfterPath(currentVideoPath){
    	c = currentVideoPath;
    	afp = c.substring(0,c.length-4)+'_after'+c.substring(c.length-4);
        return afp;
    }
    function getVideoID(value){
    	c = value.substring(c.length-5,c.length-4)
        return parseInt(c);
    }
    function getcurrVal(value){
    	if(value==0){
    		return 0
    	}else{
    		return value-1
    	}
    }
    //暂停
    function VideoPause(){
    	$("#playBtn").css("display","block");
		$("#pauseBtn").css("display","none");
        video_one.pause();
        video_two.pause();
        var gsv = getSettingVal();
        if (vlc!=null && gsv==3 && xhs==1){
        	$("#video1").attr("src",'../static/video/'+vlc);
			$("#video2").attr("src",'../static/video/'+getVideoAfterPath(vlc));
			$("#playBtn").css("display","block");
			$("#pauseBtn").css("display","none");
			xhs = 0;
        } 
    }

	var scale = function (btn,bar,title){
		this.btn=document.getElementById(btn);
		this.bar=document.getElementById(bar);
		this.title=document.getElementById(title);
		this.step=this.bar.getElementsByTagName("div")[0];
		this.init();
	};
	scale.prototype={
		init:function (){
			var f=this,g=document,b=window,m=Math;
			f.btn.onmousedown=function (e){
				var x=(e||b.event).clientX;
				var l=this.offsetLeft;
				var max=f.bar.offsetWidth-this.offsetWidth;
				g.onmousemove=function (e){
					var thisX=(e||b.event).clientX;
					var to=m.min(max,m.max(-2,l+(thisX-x)));
					f.btn.style.left=to+'px';
					f.ondrag(m.round(m.max(0,to/max)*100),to);
					b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
				};
				g.onmouseup=new Function('this.onmousemove=null');
			};
		},
		ondrag:function (pos,x){
			this.step.style.width=Math.max(0,x)+'px';
			this.title.innerHTML=pos+'分';
			fraction_vo = pos;
		}
	}
	new scale('btn','bar','title');

	var scaletwo = function (btntwo,bartwo,titletwo){
		this.btntwo=document.getElementById(btntwo);
		this.bartwo=document.getElementById(bartwo);
		this.titletwo=document.getElementById(titletwo);
		this.steptwo=this.bartwo.getElementsByTagName("div")[0];
		this.init();
	};
	scaletwo.prototype={
		init:function (){
			var f=this,g=document,b=window,m=Math;
			f.btntwo.onmousedown=function (e){
				var x=(e||b.event).clientX;
				var l=this.offsetLeft;
				var max=f.bartwo.offsetWidth-this.offsetWidth;
				g.onmousemove=function (e){
					var thisX=(e||b.event).clientX;
					var to=m.min(max,m.max(-2,l+(thisX-x)));
					f.btntwo.style.left=to+'px';
					f.ondragtwo(m.round(m.max(0,to/max)*100),to);
					b.getSelection ? b.getSelection().removeAllRanges() : g.selection.empty();
				};
				g.onmouseup=new Function('this.onmousemove=null');
			};
		},
		ondragtwo:function (postwo,x){
			this.steptwo.style.width=Math.max(0,x)+'px';
			this.titletwo.innerHTML=postwo+'分';
			fraction_vt = postwo;
		}
	}
	new scaletwo('btntwo','bartwo','titletwo');

	$('#Restart').click(function(){
	    $("#playBtn").css("display","block");
	    $("#pauseBtn").css("display","none");
	    video_one.load();
	    video_one.pause();
	    video_two.load();
	    video_two.pause();
	})

	function SubmitLottery() {
		VideoPause()
	    var t = $('form').serializeArray();
	    console.log('video id is '+video_id);
	    var a = fraction_vo;
	    var b = fraction_vt;
	    console.log(fraction_vo);
	    console.log(fraction_vt);
	    if(notes==1){
	    	var t;
	    	t = a;
	    	a = b;
	    	b = t;
	    }
	    console.log("#@@@@@@################@@@@@@@@@@@@")
	    console.log(a);
	    console.log(b);
	    // return;
	    $.ajax({
	        type: 'post',
	        url: '/forms/', //路由加'/'否则会报ssh错误
	        data: {
        		'video1_score':a,
    			'video2_score':b,
	            'video_id':video_id,
	        },
	        dataType: 'json',
	        success: function(data){
	        	if (data=='1'){
	        		alert('优化前视频得分：'+a+'\n'+'优化后视频得分：'+b)
	        	}else if(data=='2'){
	        		alert('分数不能为零，请拖动分数条重新打分！')
	        	}else{
	        		alert('Error')
	        	}
	        	
	            // location.reload()    //成功刷新界面
	        },

	    })
	}
</script>
</body>
</html>
